<script setup>
import {onMounted, ref, watch} from "vue";
import SingleLineInput from "../../components/preview/SingleLineInput.vue";
import {useRoute} from "vue-router";
import RadioInput from "../../components/preview/RadioInput.vue";
import CheckboxInput from "../../components/preview/CheckboxInput.vue";
import {getSurveysApi} from "../../apis/SurveysApi.js";
import {Message} from "@arco-design/web-vue";
import SingleTextarea from "../../components/preview/SingleTextarea.vue";
import {DEV_SURVEYS_KEY} from "../../config/index.js";
import {router} from "../../router/index.js";
import PreviewFooter from "../../components/preview/PreviewFooter.vue";
import SingleRate from "../../components/preview/SingleRate.vue";
import AllPreview from "../../components/preview/AllPreview.vue";
const defaultBg = new URL('../../assets/default-bg.png', import.meta.url).href;

const route = useRoute()
const surveysId = ref(route.params.id)
//预览模式 默认PC端预览 MOBILE 移动端 PAD 平板
//预览宽度 PC端 100%  移动端 390px pad端 768px
const previewType = ref('PC')


const surveys = ref({
    title: '新问卷',
    description:'',
    questions:[],
    type:0
})
const surveysStyle = ref({
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    backgroundImage: surveys.value.bgimg ? "url(" + surveys.value.bgimg + ")": `url(${defaultBg})`,
    backgroundPosition: 'left',
    width: '100%'
})

//监听预览类型切换
watch(previewType, (newVal) => {
    if(newVal === 'PC'){
        surveysStyle.value.width = '100%'
        surveysStyle.value.backgroundPosition = 'left'
    }else if(newVal === 'MOBILE'){
        surveysStyle.value.width = '390px'
        //移动端和PAD时 设置背景居中
        surveysStyle.value.backgroundPosition = 'center'
    }else if(newVal === 'PAD'){
        surveysStyle.value.width = '768px'
        surveysStyle.value.backgroundPosition = 'center'
    }
})


onMounted( () => {
    //从sessionStorage获取存储的临时预览 问卷数据
    let json = sessionStorage.getItem(DEV_SURVEYS_KEY)
    if(json){
        surveys.value = JSON.parse(json)
        surveysStyle.value.backgroundImage = surveys.value.bgimg ? "url(" + surveys.value.bgimg + ")": `url(${defaultBg})`
    }else{
        Message.error('未找到问卷数据，请重新创建问卷')
        router.back()
    }
})

</script>

<template>
<div class="w-full min-h-full">
    <div class="maxDiv mx-auto px-4 pb-24 pt-12" :style="surveysStyle">
        <div class="w-52 mx-auto mb-4">
            <a-space>
                <a-button type="primary" @click="previewType = 'PC'">PC端</a-button>
                <a-button type="primary" @click="previewType = 'MOBILE'">移动端</a-button>
                <a-button type="primary" @click="previewType = 'PAD'">Pad端</a-button>
            </a-space>
        </div>

        <!--    问卷设计界面-->
        <div class="max-w-5xl mx-auto rounded border-2 bg-white shadow-lg ">
            <div class="px-6">
                <h1 class="text-2xl text-center font-bold mt-4">{{surveys.title}}</h1>
                <p class="text-lg text-center my-3">{{surveys.description}}</p>

                <!--        每题问题-->
                <div v-for="question in surveys.questions" class="mt-5">
                    <AllPreview :question="question"/>
                </div>

                <div v-if="surveys.questions.length === 0">
                    <a-result status="404" subtitle="暂无问题，快去添加问题吧！">
                    </a-result>
                </div>
            </div>

            <div class="w-full mt-6">
                <div class="w-full flex justify-center mt-6 mb-8">
                    <!--            <a-button class="w-52" type="primary" @click="addQuestion">添加题目</a-button>-->
                    <!--            <a-button class="w-52 ml-5" type="primary" @click="logTest">打印表单</a-button>-->
                    <a-button class="w-52 ml-5" type="primary" @click="router.back()">返回</a-button>
                </div>

                <!--            底部栏-->
                <PreviewFooter :text="surveys.createUserName"/>
            </div>

        </div>
    </div>
</div>

</template>

<style scoped>
.maxDiv{
    min-height: 100vh !important;
    : no-repeat;
}
</style>
